define(["jquery", "jquery-cookie"], function ($) {
    // header
    // 头部二级菜单
    function navHover() {
        // 鼠标移入前四个导航菜单时, 显示二级下拉菜单
        var index = 0;
        var lastIndex = 0;
        // 把事件委托给ul
        $('#headerNav').on('mouseenter', '.headerNavSub', function () {
            lastIndex = index;
            index = $(this).index();
            // 滑出二级菜单
            // $('#subNav').addClass('slide-down');
            $('#subNav').stop(true).animate({
                height: 265
            }, 100);
            // 显示对应的二级菜单内容
            $('#subNav .sub-nav-list').eq(lastIndex).removeClass('sub-nav-list-on');
            $('#subNav .sub-nav-list').eq(index).addClass('sub-nav-list-on');
        });
        // 当鼠标移出#navBox时, 二级菜单消失
        $('#navBox').mouseleave(function () {
            $('#subNav').stop(true).animate({
                height: 0
            }, 0);
        })
        $('#headerNav .noSub').mouseenter(function () {
            $('#subNav').stop(true).animate({
                height: 0
            }, 0);
        });

        // 当鼠标移入app下载时, 显示app下载相关图片
        $('#app').mouseenter(function () {
            $('#downloadApp').stop(true).animate({
                height: 402
            }, 100);
        });
        $('#navBox').mouseleave(function () {
            $('#downloadApp').stop(true).animate({
                height: 0
            }, 0);
        });
        $('#headerNav li').slice(0, 9).mouseenter(function () {
            $('#downloadApp').stop(true).animate({
                height: 0
            }, 0);
        });

        // 当鼠标移入登录/注册时, 显示下拉列表
        $('#admin').mouseenter(function () {
            if ($.cookie('account')) {
                $('#userList').show();
            } else {
                $('#adminList').show();
            }
        }).mouseleave(function () {
            $('#userList').add('#adminList').hide();
        });

        // 当鼠标移入购物车时, 显示购物车内容
        $('#shopCar').mouseenter(function () {
            $('#subShopcar').css({
                display: 'flex'
            });
        }).mouseleave(function () {
            $('#subShopcar').css({
                display: 'none'
            });
        });
    }

    // 渲染头部二级菜单内容
    function navDownload() {
        // 手机
        navP();
        function navP() {
            $.ajax({
                type: 'get',
                // 这里的路径是相对于首页index.html的路径
                url: './data/subNavP.json',
                success: function (arr) {
                    // console.log(arr);
                    var html = ``;
                    for (var i = 0; i < arr.length; i++) {
                        if (i == 0) {
                            html += `
                            <li>
                                <a href="./html/goodsDetail.html">
                                    <em style='background-image: ${arr[i].imgUrl};'></em>
                                    <p>${arr[i].title}</p>
                                    <span>${arr[i].price}</span>
                                </a>
                            </li>
                        `;
                        } else {
                            html += `
                                <li>
                                    <a href="javascript:;">
                                        <em style='background-image: ${arr[i].imgUrl};'></em>
                                        <p>${arr[i].title}</p>
                                        <span>${arr[i].price}</span>
                                    </a>
                                </li>
                            `;
                        }
                    }
                    // 将拼接成功的商品, 渲染到页面上
                    $('#subNavP').html(html);
                },
                error: function (err) {
                    console.log(err);
                }
            })
        }

        // 声学
        navM();
        function navM() {
            $.ajax({
                type: 'get',
                // 这里的路径是相对于首页index.html的路径
                url: './data/subNavM.json',
                success: function (arr) {
                    // console.log(arr);
                    var html = ``;
                    for (var i = 0; i < arr.length; i++) {
                        html += `
                            <li>
                                <a href="javascript:;">
                                    <em style='background-image: ${arr[i].imgUrl};'></em>
                                    <p>${arr[i].title}</p>
                                    <span>${arr[i].price}</span>
                                </a>
                            </li>
                        `;
                    }
                    // 将拼接成功的商品, 渲染到页面上
                    $('#subNavM').html(html);
                },
                error: function (err) {
                    console.log(err);
                }
            })
        }

        // 配件
        navO();
        function navO() {
            $.ajax({
                type: 'get',
                // 这里的路径是相对于首页index.html的路径
                url: './data/subNavO.json',
                success: function (arr) {
                    // console.log(arr);
                    var html = ``;
                    for (var i = 0; i < arr.length; i++) {
                        html += `
                            <li>
                                <a href="javascript:;">
                                    <em style='background-image: ${arr[i].imgUrl};'></em>
                                    <p>${arr[i].title}</p>
                                    <span>${arr[i].price}</span>
                                </a>
                            </li>
                        `;
                    }
                    // 将拼接成功的商品, 渲染到页面上
                    $('#subNavO').html(html);
                },
                error: function (err) {
                    console.log(err);
                }
            })
        }

        // 生活
        navL();
        function navL() {
            $.ajax({
                type: 'get',
                // 这里的路径是相对于首页index.html的路径
                url: './data/subNavL.json',
                success: function (arr) {
                    // console.log(arr);
                    var html = ``;
                    for (var i = 0; i < arr.length; i++) {
                        html += `
                            <li>
                                <a href="javascript:;">
                                    <em style='background-image: ${arr[i].imgUrl};'></em>
                                    <p>${arr[i].title}</p>
                                    <span>${arr[i].price}</span>
                                </a>
                            </li>
                        `;
                    }
                    // 将拼接成功的商品, 渲染到页面上
                    $('#subNavL').html(html);
                },
                error: function (err) {
                    console.log(err);
                }
            })
        }
    }

    // 登录成功, 取到cookie
    function login() {
        var account = $.cookie('account');
        if (account) {
            // 改变登录状态, 显示头像
            $('#admin').addClass('mine');
        }

        // 点击退出登录
        $('#logOut').on('click', function () {
            if (confirm('确认退出吗?')) {
                $.cookie('account', null, { path: '/' });
                // 改变登录状态, 隐藏头像
                $('#admin').removeClass('mine');
            }
        });
    }

    // banner
    // 轮播图
    function carousel() {
        var index = 0;
        var lastIndex = 0;
        var timer = null;

        // 当点击导航按钮时, 显示对应的图片
        $('#bannerNav li').click(function () {
            clearInterval(timer);
            lastIndex = index;
            index = $(this).index();
            change();
        });

        // 自动轮播
        timer = setInterval(function () {
            lastIndex = index;
            index++;
            change();
        }, 3000);

        // 鼠标移入移出
        $('#bannerList').mouseenter(function () {
            clearInterval(timer);
        }).mouseleave(function () {
            timer = setInterval(function () {
                lastIndex = index;
                index++;
                change();
            }, 3000);
        });

        // 封装切换函数
        function change() {
            $('#bannerNav li').eq(lastIndex).removeClass('banner-nav-on');
            $('#bannerNav li').eq(index).addClass('banner-nav-on');
            // 回到第一张时按钮的样式
            if (index === $('#bannerNav li').size()) {
                $('#bannerNav li').eq(0).addClass('banner-nav-on');
            }
            // 切换对应的图片
            $('#bannerList').stop(true).animate({
                left: - 660 - 2560 * index
            }, 500, function () {
                // 切换
                if (index === $('#bannerNav li').size()) {
                    index = 0;
                    $('#bannerList').css({
                        left: - 660
                    });
                }
            });
        }
    }



    // content
    // 渲染内容的商品
    function contentDownload() {
        // Phone手机板块
        contentP();
        function contentP() {
            $.ajax({
                type: 'get',
                // 这里的路径是相对于首页index.html的路径
                url: './data/phoneSmall.json',
                success: function (arr) {
                    // console.log(arr);
                    var html = `
                    <li class="phone-big">
                        <a href="javascript:;">
                            <img src="./images/index/container/phone/phone-big1.png" alt="">
                            <p class="goods-detail">
                                <span class="goods-name">魅族 17</span>
                                <span class="goods-desc">高通骁龙 865 + UFS 3.1 高速闪存 | 6400W 全场景影像系统</span>
                                <span class="goods-price">￥3699</span>
                            </p>
                            <span class="goods-sign">新品</span>
                        </a>
                    </li>
                    <li class="phone-big phone-big-last">
                        <a href="javascript:;">
                            <img src="./images/index/container/phone/phone-big2.png" alt="">
                            <p class="goods-detail">
                                <span class="goods-name">魅族 17 Pro</span>
                                <span class="goods-desc">高通骁龙 865 + UFS 3.1 + LPDDR5 | 6400W 全场景 AR 专业影像系统</span>
                                <span class="goods-price">￥4299</span>
                            </p>
                            <span class="goods-sign">新品</span>
                        </a>
                    </li>
                    `;
                    for (var i = 0; i < arr.length; i++) {
                        if (arr[i].red === '') {
                            html += `
                            <li class="phone-small">
                                <a href="javascript:;">
                                    <img src=${arr[i].imgUrl} alt="">
                                    <p class="goods-detail">
                                        <span class="goods-name">${arr[i].name}</span>
                                        <span class="goods-desc">${arr[i].desc}</span>
                                        <span class="goods-price">￥${arr[i].price}</span>
                                    </p>
                                </a>
                            </li>
                        `;
                        } else {
                            html += `
                                <li class="phone-small">
                                    <a href="javascript:;">
                                        <img src=${arr[i].imgUrl} alt="">
                                        <p class="goods-detail">
                                            <span class="goods-name">${arr[i].name}</span>
                                            <span class="goods-desc">${arr[i].desc}</span>
                                            <span class="goods-price">￥${arr[i].price}</span>
                                        </p>
                                        <span class="goods-sign">${arr[i].red}</span>
                                    </a>
                                </li>
                            `;
                        }
                    }
                    // 将拼接成功的商品, 渲染到页面上
                    $('#phoneContentList').html(html);
                },
                error: function (err) {
                    console.log(err);
                }
            })
        }

        // Music声学板块
        contentM();
        function contentM() {
            $.ajax({
                type: 'get',
                // 这里的路径是相对于首页index.html的路径
                url: './data/musicSmall.json',
                success: function (arr) {
                    // console.log(arr);
                    var html = ``;
                    for (var i = 0; i < arr.length; i++) {
                        if (arr[i].red === '') {
                            html += `
                            <li class="phone-small">
                                <a href="javascript:;">
                                    <img src=${arr[i].imgUrl} alt="">
                                    <p class="goods-detail">
                                        <span class="goods-name">${arr[i].name}</span>
                                        <span class="goods-desc">${arr[i].desc}</span>
                                        <span class="goods-price">￥${arr[i].price}</span>
                                    </p>
                                </a>
                            </li>
                        `;
                        } else {
                            html += `
                                <li class="phone-small">
                                    <a href="javascript:;">
                                        <img src=${arr[i].imgUrl} alt="">
                                        <p class="goods-detail">
                                            <span class="goods-name">${arr[i].name}</span>
                                            <span class="goods-desc">${arr[i].desc}</span>
                                            <span class="goods-price">￥${arr[i].price}</span>
                                        </p>
                                        <span class="goods-sign">${arr[i].red}</span>
                                    </a>
                                </li>
                            `;
                        }
                    }
                    // 将拼接成功的商品, 渲染到页面上
                    $('#musicContentList').html(html);
                },
                error: function (err) {
                    console.log(err);
                }
            })
        }

        // Other配件板块
        contentO();
        function contentO() {
            $.ajax({
                type: 'get',
                // 这里的路径是相对于首页index.html的路径
                url: './data/otherSmall.json',
                success: function (arr) {
                    // console.log(arr);
                    var html = ``;
                    for (var i = 0; i < arr.length; i++) {
                        if (arr[i].red === '') {
                            html += `
                            <li class="phone-small">
                                <a href="javascript:;">
                                    <img src=${arr[i].imgUrl} alt="">
                                    <p class="goods-detail">
                                        <span class="goods-name">${arr[i].name}</span>
                                        <span class="goods-desc">${arr[i].desc}</span>
                                        <span class="goods-price">￥${arr[i].price}</span>
                                    </p>
                                </a>
                            </li>
                        `;
                        } else {
                            html += `
                                <li class="phone-small">
                                    <a href="javascript:;">
                                        <img src=${arr[i].imgUrl} alt="">
                                        <p class="goods-detail">
                                            <span class="goods-name">${arr[i].name}</span>
                                            <span class="goods-desc">${arr[i].desc}</span>
                                            <span class="goods-price">￥${arr[i].price}</span>
                                        </p>
                                        <span class="goods-sign">${arr[i].red}</span>
                                    </a>
                                </li>
                            `;
                        }
                    }
                    // 将拼接成功的商品, 渲染到页面上
                    $('#otherContentList').html(html);
                },
                error: function (err) {
                    console.log(err);
                }
            })
        }

        // Life生活板块
        contentL();
        function contentL() {
            $.ajax({
                type: 'get',
                // 这里的路径是相对于首页index.html的路径
                url: './data/lifeSmall.json',
                success: function (arr) {
                    // console.log(arr);
                    var html = ``;
                    for (var i = 0; i < arr.length; i++) {
                        if (arr[i].red === '') {
                            html += `
                                    <li class="phone-small">
                                        <a href="javascript:;">
                                            <img src=${arr[i].imgUrl} alt="">
                                            <p class="goods-detail">
                                                <span class="goods-name">${arr[i].name}</span>
                                                <span class="goods-desc">${arr[i].desc}</span>
                                                <span class="goods-price">￥${arr[i].price}</span>
                                            </p>
                                        </a>
                                    </li>
                                `;
                        } else {
                            html += `
                                        <li class="phone-small">
                                            <a href="javascript:;">
                                                <img src=${arr[i].imgUrl} alt="">
                                                <p class="goods-detail">
                                                    <span class="goods-name">${arr[i].name}</span>
                                                    <span class="goods-desc">${arr[i].desc}</span>
                                                    <span class="goods-price">￥${arr[i].price}</span>
                                                </p>
                                                <span class="goods-sign">${arr[i].red}</span>
                                            </a>
                                        </li>
                                    `;
                        }
                    }
                    // 将拼接成功的商品, 渲染到页面上
                    $('#lifeContentList').html(html);
                },
                error: function (err) {
                    console.log(err);
                }
            })
        }

        // Community社区版块
        contentC();
        function contentC() {
            $.ajax({
                type: 'get',
                // 这里的路径是相对于首页index.html的路径
                url: './data/community.json',
                success: function (arr) {
                    // console.log(arr);
                    var html = ``;
                    for (var i = 0; i < arr.length; i++) {
                        html += `
                            <li>
                            <a href="javascript:;">
                                <div class="commun-img">
                                    <img src="${arr[i].imgUrl}" alt="">
                                </div>
                                <div class="commun-info">
                                    <img src="${arr[i].infoImg}" alt="">
                                    <span class="commun-info-name">${arr[i].name}</span>
                                </div>
                                <p class="commun-desc">
                                    ${arr[i].desc}
                                </p>
                                <span class="commun-tip">${arr[i].tip}</span>
                            </a>
                            </li>
                        `;
                    }
                    // 将拼接成功的商品, 渲染到页面上
                    $('#communityContentList').html(html);
                },
                error: function (err) {
                    console.log(err);
                }
            })
        }

        // Flyme版块
        contentF();
        function contentF() {
            $.ajax({
                type: 'get',
                // 这里的路径是相对于首页index.html的路径
                url: './data/flyme.json',
                success: function (arr) {
                    // console.log(arr);
                    var html = ``;
                    for (var i = 0; i < arr.length; i++) {
                        if (!arr[i].title) {
                            html += `
                                <li>
                                    <a href="javascript:;">
                                        <img src="${arr[i].imgUrl}" alt="">
                                    </a>
                                </li>
                            `;
                        } else {
                            html += `
                                <li>
                                    <a href="javascript:;">
                                        <img src="${arr[i].imgUrl}" alt="">
                                        <p>
                                            ${arr[i].title}
                                        </p>
                                    </a>
                                </li>
                            `;
                        }
                    }
                    // 将拼接成功的商品, 渲染到页面上
                    $('#flymeContentList').html(html);
                },
                error: function (err) {
                    console.log(err);
                }
            })
        }

        // Video版块
        contentV();
        function contentV() {
            $.ajax({
                type: 'get',
                // 这里的路径是相对于首页index.html的路径
                url: './data/video.json',
                success: function (arr) {
                    // console.log(arr);
                    var html = ``;
                    for (var i = 0; i < arr.length; i++) {
                        html += `
                            <li>
                                <a href="javascript:;">
                                    <i></i>
                                    <img src="${arr[i].imgUrl}" alt="">
                                    <p>
                                        ${arr[i].title}
                                    </p>
                                </a>
                            </li>
                        `;
                    }
                    // 将拼接成功的商品, 渲染到页面上
                    $('#videoContentList').html(html);
                },
                error: function (err) {
                    console.log(err);
                }
            })
        }
    }



    // footer
    // 分享hover
    function shareHover() {
        $('#langA').mouseenter(function () {
            $('#langSubList').css({
                display: 'block'
            });
        });
        $('#lang').mouseleave(function () {
            $('#langSubList').css({
                display: 'none'
            });
        });

        $('#applet').mouseenter(function () {
            $(this).find('img').css({ display: 'block' });
        }).mouseleave(function () {
            $(this).find('img').css({ display: 'none' });
        });

        $('#qrcode').mouseenter(function () {
            $(this).find('img').css({ display: 'block' });
        }).mouseleave(function () {
            $(this).find('img').css({ display: 'none' });
        });
    }


    return {
        navHover: navHover,
        carousel: carousel,
        navDownload: navDownload,
        contentDownload: contentDownload,
        shareHover: shareHover,
        login: login
    }
});